<script>
import ChartResizeListener from '@/mixins/chart-resize-listener'
import GlobalFilterListener from '@/views/visual-screen/components/GlobalFilterListener.vue'

const ds = [
  { name: '碳化钨粉', value: 0.227, unit: '吨标准煤/吨' },
  { name: '硬质合金', value: 1.672, unit: '吨标准煤/吨' },
  { name: '钨粉', value: 0.45, unit: '吨标准煤/吨' },
  { name: '精密工具', value: 0.173, unit: '吨标准煤/万支' },
  { name: '混合料', value: 0.234, unit: '吨标准煤/吨' },
  { name: '锂电铜箔', value: 0.65, unit: '吨标准煤/吨' },
  { name: '二氧化硅', value: 1.1397, unit: '吨标准煤/吨' },
]
export default {
  name: 'company-product-analysis',
  inject: ['colors'],
  mixins: [ChartResizeListener, GlobalFilterListener],
  data () {
    return {
      products: []
    }
  },
  computed: {
    chartOption () {
      const products = this.products
      return {
        tooltip: {
          trigger: 'item',
          formatter (params) {
            const data = params.data || {}
            return `${params.marker} ${data.name}: <b>${data.value} ${data.unit}</b>`
          }
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#136cca'
            }
          },
          data: products.map(v => v.name),
        },
        yAxis: {
          type: 'value',
          show: false,
        },
        grid: {
          top: '30px',
          bottom: '30px',
        },
        series: [
          {
            type: 'pictorialBar',
            barCategoryGap: '-130%',
            label: {
              show: true,
              position: 'top',
            },
            // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            data: products.map((v, i) => ({
              ...v,
              label: {
                color: this.colors[i],
              },
              itemStyle: {
                color: this.colors[i]
              }
            }))
          }
        ]
      }
    },
  },
  mounted () {
    this.rand()
  },
  methods: {
    rand () {
      ds.sort(() => Math.random() - 0.5)
      this.products = ds
    },
    eventBusHandler () {
      this.rand()
    },
  },
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon class="item-icon" name="product"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title">公司产品单耗分析</h3>
        <p class="secondary-title">Company product analysis</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content" ref="container">
        <v-chart ref="chart" :option="chartOption" style="width:100%;height: 200px;"></v-chart>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
